<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加用户</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form
        ref="addform"
        label-width="80px"
        size="mini"
        :model="addform"
        :rules="rules"
        @submit.native.prevent
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓 名:" prop="username">
              <el-input v-model="addform.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话号码:" prop="phone">
              <el-input v-model="addform.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状 态:" prop="status">
              <el-select v-model="addform.status" placeholder="请选择">
                <el-option label="普通用户" value="1"></el-option>
                <el-option label="管理员" value="2"></el-option>
                <el-option label="超级管理员" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="登录名:" prop="loginname">
              <el-input v-model="addform.loginname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="密 码:" prop="password">
              <el-input type="password" v-model="addform.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="addbtn"
                >添加</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="warning" size="small" @click="resetForm('addform')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addform: {
        username: "",
        loginname: "",
        status: "",
        password: "",
        phone: "",
      },
      rules: {
        username: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "姓名长度应在 3 到 10 位之间",
            trigger: "blur",
          },
        ],
        loginname: [
          { required: true, message: "登录名不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "登录名长度应在 3 到 10 位之间",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度应在 6 到 15 位之间",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "手机号码不符合",
            trigger: "blur",
          },
          {
            pattern: /^[1][3-9][0-9]{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async addbtn() {
      this.$refs.addform.validate(async (valid) => {
        try {
          if (valid) {
            const { data: res } = await this.$http.post(
              "/users/reg",
              this.addform
            );
            console.log(res);
            if (res.code === 200) {
              this.$router.push("/user");
              this.$message.success(res.message);
            }else {
            return this.$message.error(res.message); 
          }
          } 
        } catch (err) {
          console.log(err);
        }
      });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>

<style></style>
